<template>
  <div class="center">
    <header>
      <div class="beijin"></div>
      <div class="flex aic users pixed">
        <router-link to="/login" v-if="!isLogin" class="f16 fff ml-5">立即登录</router-link>
        <span v-else class="f16 ml-5 fff">{{ phone }}</span>
      </div>
    </header>
    <!-- 列表栏 -->
    <main class="mt-10">
      <div class="bg-fff">
        <van-cell title="我的订单" isLink to="/order/list"></van-cell>
        <van-cell title="收藏" isLink to="/favorite"></van-cell>
        <van-cell title="足迹" isLink to="/footprint"></van-cell>
        <van-cell title="优惠券" isLink></van-cell>
        <van-cell title="我的地址" isLink></van-cell>
        <van-cell title="设置" isLink to="/my/set"></van-cell>
        <van-cell center :title="environment">
          <template #right-icon>
            <van-switch v-model="checked" size="24" @change="toggleEnvironment" />
          </template>
        </van-cell>
      </div>
    </main>
    <Footer />
  </div>
</template>
    
<script>
import Footer from "../../components/Footer.vue";

export default {
  data() {
    return {
      checked: false, // 控制开关状态
      environment: '生产环境' // 初始环境标题
    };
  },
  methods: {
    toggleEnvironment() {
      // 根据开关状态切换环境标题
      this.environment = this.checked ? '开发环境' : '生产环境';
    }
  },
  components: {
    Footer
  },
  computed: {
    isLogin() {
      return !!this.$store.state.token;
    },
    phone() {
      return this.$store.state.phone;
    }
  }
};
</script>
<style lang="less" scoped>
.beijin {
  width: 100%;
  height: 173px; 
      background-image: url('http://fresh.huruqing.cn/img/bg2.78d35cdc.png');
  
}
.flex {
  display: flex;
}
.aic {
  align-items: center;
}
.pixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  padding: 10px;
}
.f16 {
  font-size: 16px;
}
.fff {
  color: #fff;
}
.ml-5 {
  margin-left: 5px;
}
.mt-10 {
  margin-top: 10px;
}
.bg-fff {
  background-color: #fff;
}</style>
    